<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core"
import { ref } from "vue"
import { Dayjs } from "dayjs"

const darkMode = ref(false)
const html = document.documentElement
const head = document.getElementsByTagName("head")[0]
const isDark = useDark({
	selector: "html",
	attribute: "data-doc-theme",
	valueDark: "dark",
	valueLight: "light",
	async onChanged(dark) {
		if (dark) {
			document.body.setAttribute("data-theme", "dark")
			html.setAttribute("data-doc-theme", "dark")
			html.style.colorScheme = "dark"
			darkMode.value = true
			const darkStyle = document.createElement("style")
			const { default: css } = await import(
				"ant-design-vue/dist/antd.dark.css?inline"
			)
			darkStyle.innerHTML = css
			darkStyle.setAttribute("antd-dark", "")
			head.appendChild(darkStyle)
		} else {
			document.body.setAttribute("data-theme", "light")
			html.setAttribute("data-doc-theme", "light")
			html.style.colorScheme = "light"
			darkMode.value = false
			Array.from(head.querySelectorAll("style[antd-dark]")).forEach((e) =>
				e.remove()
			)
		}
	}
})
const toggleDark = useToggle(isDark)
const value = ref<Dayjs>()
const columns = [
	{
		name: "Name",
		dataIndex: "name",
		key: "name"
	},
	{
		title: "Age",
		dataIndex: "age",
		key: "age"
	},
	{
		title: "Address",
		dataIndex: "address",
		key: "address"
	},
	{
		title: "Tags",
		key: "tags",
		dataIndex: "tags"
	},
	{
		title: "Action",
		key: "action"
	}
]

const data = [
	{
		key: "1",
		name: "John Brown",
		age: 32,
		address: "New York No. 1 Lake Park",
		tags: ["nice", "developer"]
	},
	{
		key: "2",
		name: "Jim Green",
		age: 42,
		address: "London No. 1 Lake Park",
		tags: ["loser"]
	},
	{
		key: "3",
		name: "Joe Black",
		age: 32,
		address: "Sidney No. 1 Lake Park",
		tags: ["cool", "teacher"]
	}
]
</script>

<template>
	<div>
		<a-switch
			v-model:checked="darkMode"
			checked-children="开"
			un-checked-children="关"
			@change="toggleDark()"
		/>
		<div
			:style="{
				width: '300px',
				border: '1px solid #d9d9d9',
				borderRadius: '4px'
			}"
		>
			<a-calendar v-model:value="value" :fullscreen="false" />
		</div>
		<a-table :columns="columns" :data-source="data">
			<template #headerCell="{ column }">
				<template v-if="column.key === 'name'">
					<span> Name </span>
				</template>
			</template>

			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'name'">
					<a>
						{{ record.name }}
					</a>
				</template>
				<template v-else-if="column.key === 'tags'">
					<span>
						<a-tag
							v-for="tag in record.tags"
							:key="tag"
							:color="
								tag === 'loser'
									? 'volcano'
									: tag.length > 5
									? 'geekblue'
									: 'green'
							"
						>
							{{ tag.toUpperCase() }}
						</a-tag>
					</span>
				</template>
				<template v-else-if="column.key === 'action'">
					<span>
						<a>Invite 一 {{ record.name }}</a>
						<a-divider type="vertical" />
						<a>Delete</a>
						<a-divider type="vertical" />
						<a class="ant-dropdown-link"> More actions </a>
					</span>
				</template>
			</template>
		</a-table>
	</div>
</template>
